import React from 'react';
import PropTypes from 'prop-types';
import css from './index.less';
import { observer } from 'mobx-react';
import { findSimulator } from 'common/utils/store';
import { stringExtendStyle } from 'common/utils/style';
import { computed } from 'mobx';
import classnames from 'classnames';

const LINE_SIZE = 1;
export const LINE_TYPE = [
  'left',
  'right',
  'top',
  'bottom',
];

@observer
export default class Outline extends React.Component {
  static propTypes = {
    type: PropTypes.oneOf(LINE_TYPE).isRequired,
    mod: PropTypes.object.isRequired,
    // active: PropTypes.bool,
  };

  static defaultProps = {
    // active: false
  };

  @computed get style() {
    const { type, mod, mod: { rect: { width, height, left, top }, rotate } } = this.props;
    const { scrollTop } = findSimulator(mod);
    let style = {
      transform: stringExtendStyle([
        {
          key: 'rotate',
          val: rotate
        }
      ]),
      transformOrigin: `${Math.round(width / 2)}px ${Math.round(height / 2)}px`,
    };
    switch (type) {
      case 'left': {
        style = {
          ...style,
          width: LINE_SIZE,
          height,
          left: left,
          top: top - scrollTop,
        };
        break;
      }
      case 'right': {
        style = {
          ...style,
          width: LINE_SIZE,
          height,
          left: left + width,
          top: top - scrollTop,
          transformOrigin: `-${Math.round(width / 2)}px ${Math.round(height / 2)}px`,
        };
        break;
      }
      case 'top': {
        style = {
          ...style,
          width: width,
          height: LINE_SIZE,
          left: left,
          top: top - scrollTop,
        };
        break;
      }
      case 'bottom': {
        style = {
          ...style,
          width: width,
          height: LINE_SIZE,
          left: left,
          top: top + height - scrollTop - LINE_SIZE,
          transformOrigin: `${Math.round(width / 2)}px -${Math.round(height / 2)}px`,
        };
        break;
      }
    }
    return style;
  }

  render() {
    const { mod: { rect }, type, style, topPosition = 0 } = this.props;
    if (!rect) return null;
    const cls = classnames(css.outline, css[type]);
    if (topPosition) {
      this.style.top -= topPosition;
    }

    const props = {
      className: cls,
      style: {
        ...this.style,
        ...style
      }
    };

    return (
      <div {...props} />
    );
  }
}
